<template>
	<view class="content">
		<view class="title">人脸认证</view>
		<view class="memo">仅用于小区门禁系统，保证信息安全</view>
		<view class="verify">
			<view class="photo" @click="takePicture">
				<image style="width: 280upx;height: 380upx;" :src="upLoadPhoto || noPhoto"></image>
			</view>
			<view class="directions">请点击图片进行认证</view>
		</view>
		<view class="notice">认证须知</view>
		<view class="noticeDetail">
			<view style="text-align: center;">
				<image style="width: 120upx;height: 92upx;" src="/static/image/face/verify1.png"></image>
				<view class="noticeText">标准状况</view>
			</view>
			<view style="text-align: center;">
				<image style="width: 120upx;height: 92upx;" src="/static/image/face/verify2.png"></image>
				<view class="noticeText1">面部遮挡</view>
			</view>
			<view style="text-align: center;">
				<image style="width: 120upx;height: 92upx;" src="/static/image/face/verify3.png"></image>
				<view class="noticeText1">拍摄不全</view>
			</view>
			<view style="text-align: center;">
				<image style="width: 120upx;height: 92upx;" src="/static/image/face/verify4.png"></image>
				<view class="noticeText1">光线过暗</view>
			</view>
		</view>
		<view class="btnAll">
			<button class="btnConfirm" @click="upLoadBack">确定</button>
			<button class="btnCancle" @click="cancle">取消</button>
		</view>
	</view>
</template>

<script>
	import {
		apiBaseUrl,
		showError
	} from '@/config/api.js'
	export default {
		data() {
			return {
				memberId: '',
				noPhoto: '/static/image/face/default.png',
				upLoadPhoto: '',
				iotBaseUrl:"https://cdjjyl.com.cn/iot-server",
				src:''
			}
		},
		onLoad(option) {
			// if (option) {
			// 	// this.memberId = option.id
			// }
		},

		methods: {
			//模拟拍照
			takePicture() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						const size = res.tempFiles[0].size / 1024 + "kb";
						if (!tempFilePaths || tempFilePaths.length <= 0) {
							this.$api.msg("拍照失败，请重传");
							return;
						}
						uni.uploadFile({
							url: _this.iotBaseUrl + '/iot/checkFaceImg',
							filePath: tempFilePaths[0],
							fileType: 'image',
							name: 'file',
							headers: {
								'Accept': 'application/json',
								'Content-Type': 'multipart/form-data',
							},
							formData: {
								'method': 'images.upload',
								'upfile': tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								var data = JSON.parse(uploadFileRes.data);
								uni.showToast({
									title: data.msg,
									icon: 'none',
									duration: 2000
								});
								if (data.code == '200') {
									this.upLoadPhoto = tempFilePaths[0]
								}
							},
							fail: (error) => {
								if (error && error.response) {
									showError(error.response);
								}
							},
							complete: () => {
								setTimeout(function() {
									uni.hideLoading();
								}, 250);
							},
						});
					}
				});
			},
			compressImage(url, filename) {
				var name = "_doc/upload/" + filename;
				plus.zip.compressImage({
						src: url, //src: (String 类型 )压缩转换原始图片的路径    
						dst: name, //压缩转换目标图片的路径    
						quality: 90, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100    
						overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
						width: '250',
						height: '320'
					},
					function(zip) {
						//页面显示图片  
						showPics(zip.target, name);
					},
					function(error) {
						plus.nativeUI.toast("压缩图片失败，请稍候再试");
					});
			},
			upLoadBack() {
				if (this.upLoadPhoto != '') {
					let usr = this.userInfo.userUuid;
					let params = {};
					params.state = 0;
					params.communityId = this.communityId;
					params.roomId = this.curRoomId;
					params.profile = this.upLoadPhoto;
					params.wechatNo = usr.openId;
					params.ownerId = this.curVertifyPerson.memberId;
					this.$api.iotFaceVertifyAdd(params, res => {
						if (res.body.status.statusCode === '0') {
							this.$api.msg("提交成功，等待管理员审核");
						} else {
							this.$api.msg(res.body.status.errorDesc);
						}
					})
					uni.navigateBack()
				} else {
					uni.showToast({
						title: '您还未认证成功',
						icon: 'none',
						duration: 2000
					})
				}
			},
			cancle() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.content {
		overflow: auto;
		padding: 70upx;
		padding-top: 0upx;
	}

	.title {
		font-size: 48upx;
		margin-bottom: 16upx;
		/* background: #00AA00; */
	}

	.memo {
		font-size: 24upx;
		color: #999999;
	}

	.verify {
		text-align: center;
		margin-bottom: 40upx;
	}

	.photo {
		width: 300upx;
		height: 400upx;
		margin: 60upx auto 32upx auto;
		background: url('/static/image/face/defaultBorder.png') no-repeat;
		background-size: contain;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.directions {
		font-size: 28upx;
		color: #666;
	}

	.notice {
		font-size: 32upx;
		margin-bottom: 32upx;
	}

	.noticeDetail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 160upx;
	}

	.noticeText {
		font-size: 24upx;
		color: #999;
	}

	.noticeText::before {
		content: '\2713';
		font-size: 28upx;
		color: #52C572;
	}

	.noticeText1 {
		font-size: 24upx;
		color: #999;
	}

	.noticeText1::before {
		content: '\2717';
		font-size: 28upx;
		color: #F66666;
	}

	.btnAll {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btnConfirm {
		width: 250upx;
		margin: 0 !important;
		border-radius: 64upx;
		color: white !important;
		background-color: #1DA3EE !important;
	}

	.btnCancle {
		width: 250upx;
		margin: 0 !important;
		border-radius: 64upx;
		color: #666 !important;
		background-color: #E9E9E9 !important;
	}

	uni-button:after {
		border: 1px none rgba(0, 0, 0, .2) !important;
	}
</style>
